<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="description" content="Oellfare - Charity Template">
    <meta name="author" content="">

    <!-- Page Title -->
    <title>链上善行公益-反馈信息</title>

    <!-- Favicon and Touch Icons -->
    <link href="front/images/logo1.png" rel="shortcut icon" type="image/png">

    <!-- Lead Style -->
    <link href="front/css/style.css" rel="stylesheet" type="text/css">

    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .itema{
            margin-top: 10px;
            font-weight: bold;

        }
        .notification-btn {
            border: none;
            background-color: transparent;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 999;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease-in-out;
        }

        .notification.show {
            opacity: 1;
            transform: translateY(0);;
        }

        .notification.success {
            background-color: #e1f3d8;
            color: #4caf50;
        }

        .notification.warning {
            background-color: #fffbe6;
            color: #ffca28;
        }

        .notification.info {
            background-color: #e6f7ff;
            color: #2196f3;
        }

        .notification.error {
            background-color: #ffebee;
            color: #f44336;
        }
    </style>
</head>
<!--PreLoader-->
<div class="preloader">
    <div class="preloader-inner">
        <div class="siteloading-preloader"></div>
    </div>
</div>
<!--PreLoader Ends-->
<body>
<div th:replace="commons/front-bar::#header(links=${links})"></div>

<div class="main-wrapper">

    <div class="section contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="contact_form">
                        <div class="contact_form_heading_wrapper">
                            <h1 class="contact_form_title ">反馈信息</h1>
                            <p>
                                留下你的反馈，让我们一起更好的帮助他人
                            </p>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <textarea id="content" name="message" class="form-control" placeholder="在此处填写反馈内容..."></textarea>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="power_button_group">
                                    <input class="power_button effect_1" type="submit" value="提交" onclick="publishFeedback()" style="background-color: white">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="commons/front-bar::#footer"></div>

<!-- All JavaScript Files
================================================== -->
<script>
    function publishFeedback() {
        let content = $("#content").val().trim();
        if (content == ''){
            alert("请输入反馈内容");
            return;
        }
        $.ajax({
            type: "POST",
            url: "publishFeedback",
            data: {content:content},
            dataType: "json",
            success: function(data){
                if (data['code']== 200){
                    alert("您的反馈我们已经收到！");
                    $("#content").val("");
                    window.location.reload();
                }else {
                    alert("服务器发生了一个错误");
                }
            }
        });
    }

</script>

<script src="common/js/jquery.min.js"></script>
<script src="common/js/board.js"></script>
<script src="front/js/bootstrap.min.js"></script>
<script src="front/js/menu.js"></script>
<script src="front/js/select2.js"></script>
<script src="front/js/jquery.fancybox.min.js"></script>
<script src="front/js/owl.carousel.min.js"></script>
<script src="front/js/spectragram.min.js"></script>
<script src="front/js/wow.js"></script>
<script src="front/js/custom.js"></script>
<script>
    //来进行监视数据
    var surveyRatingSelect = document.getElementById('surveyRating');
    surveyRatingSelect.addEventListener('change', function() {
    });
    function ToSatisFac(){
        $.ajax({
            url: "/blockchain-kindness/donations/addSatisfaction",
            type: "post",
            data: {
                grade : surveyRatingSelect.value
            },
            success: function (data) {
                if(data.message === '投票成功') {
                    var element = document.querySelector('#opt_success');
                    element.click();
                    function hideModalAndShowAnother() {
                        $('#surveyModal').modal('hide'); // 关闭模态对话框
                    }
                    setTimeout(hideModalAndShowAnother, 3000);
                }else{
                    alert("您没有输入合适的信息")
                }
            },
            error: function (data) {
            }
        });
    }
</script>
<script>
    localStorage.setItem('url',window.location.href);
    function createNotification(type, title, message) {
        const notificationDiv = document.createElement('div');
        notificationDiv.classList.add('notification', type, 'show');

        const titleElement = document.createElement('strong');
        titleElement.textContent = title;
        notificationDiv.appendChild(titleElement);

        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        notificationDiv.appendChild(messageElement);
        const Container = document.getElementById('notifications1');
        Container.appendChild(notificationDiv);

        setTimeout(() => {
            notificationDiv.classList.remove('show');
            setTimeout(() => {
                Container.removeChild(notificationDiv);
            }, 300);
        }, 2000);
    }

    function openSuccess() {
        createNotification('success', '感谢您的反馈，我们会做的更好');
    }

    function openWarning() {
        createNotification('warning', '警告', '这是一条警告的提示消息');
    }

    function openInfo() {
        createNotification('info', '消息', '这是一条消息的提示消息');
    }

    function openError() {
        createNotification('error', '错误', '您输入的信息有错，请重新输入');
    }
</script>
</script>
</body>
</html>